<template>
	<view class="top">
		<view class="back-btn" @click="backPage()">
			<view class="back-icon"></view>
		</view>
		<view style="color: white;text-align: center;">评价管理</view>
		<uni-card class="card" v-for="(item,index) in orderDetails" :key="index">
			<view class="items">
				<view class="items_top">
					<view class="title">
						{{user.find(items=>items.id===item.userId)?.nickName}}
					</view>
					<view class="btn">
						<button @click="goXiangQing(item.id)">查看详情</button>
					</view>

				</view>
				<view class="items_con">
					<view class="bianhao mb20">
						订单编号：{{ item.orderNum }}
					</view>
					<view class="rate mb20">
						<view class="pingfen">
							综合评分：
							{{ evaluateList.find(items=>items.orderId===item.id)?.score || 0}}分
						</view>
						 <uni-rate :value="evaluateList.find(items=>items.orderId===item.id)?.score/2|| 0"  size="18"  readonly >
						</uni-rate>
					</view>
					<view class="time mb20">
						评价时间：{{ evaluateList.find(items=>items.orderId===item.id)?.commentTime}}
					</view>
				</view>
			</view>

		</uni-card>
		
	</view>
</template>

<script setup>
	import {ref} from 'vue';
	const rateValue = ref(0);
	import request from '../../../utils/request';



	function backPage(){
		uni.navigateBack()
	}


   
	const onChange = (e) => {
		console.log('rate发生改变:' + JSON.stringify(e));
	};
	const goXiangQing = (id)=>{	
		console.log("点击了",id);

		uni.navigateTo({
			// url:'/pages/index/pingjia/pjxiangqing/pjxiangqing?id='+id
			url:`/pages/index/pingjia/pjxiangqing/pjxiangqing?id=${id}`
		})
	}
	const evaluateList = ref([])
	const myselef = ref([])
	const id=uni.getStorageSync("userinfo")
	// 服务详情
   const evaluate = ()=>{
		request({
			url:'evaluate/evaluate/list',
			method:'get',
			data:{
				pageNum:1,
				pageSize:10000,
			},
			success(res){
				evaluateList.value=res.data.rows
			
                 evaluateList.value = evaluateList.value.filter(item => item.merchantId == id.id)
				
                 myselef.value = evaluateList.value		
				 evaluateList.value.forEach(element => {
					orderDetail(element.orderId)	
												 
					})
							
			}		
})
}
const  userIds =ref(0)
const orderDetails = ref([])
		//订单详情
		function orderDetail(id){
		
			
			request({
				url:'offer/orders/'+id,	
			success(res){
					
					if(res.data.code==200){
						if(res.data.data!=undefined){
							orderDetails.value.push(res.data.data)
						}
						orderDetails.value = orderDetails.value.reverse()
						
						orderDetails.value.forEach(element => {
							
							if(userIds.value!=element.userId){
								console.log("userIds",userIds.value);
								
								userIds.value = element.userId
								console.log("element",element.userId);
							findUser(element.userId)
							}
												 
							})					
					}
					console.log("orderDetails",orderDetails.value);
               },
			   fail(err){
					console.log("跳转失败,",err);
			   }
			})
			
		}
		const user = ref([])
	//查找用户
	 function findUser(id){
		console.log("id测试人员",id);
		
		request({
				url:'bigbase/info/'+id,
				success(res){
					console.log("findUser",res);
					
					user.value.push(res.data.data)
					console.log("userId",user.value);
					
			}
		})
	 }


		

	
	evaluate()
	
</script>

<style scoped>
	@import url('@/common/app.css');

	.mb20 {
		margin-bottom: 20rpx;
	}

	.card {
		margin: 0;
		height: 350rpx;
	}

	.items {
		height: 300rpx;
		margin: 20rpx 0;

	}

	.items_con {
		padding: 20rpx 0;
	}

	.items_top {
		height: 70rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		border-bottom: 3px solid lightgray;
	}

	.btn button {
		width: 160rpx;
		height: 50rpx;
		line-height: 50rpx;
		color: white;
		background-color: #0863e7;
		border-radius: 60rpx;
		font-size: 26rpx;
	}

	.bianhao {
		color: #0863e7;
	}

	.rate {
		display: flex;
		justify-content: start;
		align-items: center;
		height: 50rpx;
		line-height: 50rpx;
	}

	.pingfen {
		color: black;
		
	}

	.time {
		color: gray;
	}
	.back-btn{ margin-left: 20rpx; width: 50rpx; height: 50rpx; position: relative;}	
	.back-icon { width: 30px; height: 30px;}	
	.back-icon::before { content: ""; position: absolute; width: 20px; height: 2px; background-color: #fff; top: 80rpx; left: 47rpx; transform: translate(-50%, -50%); }
	.back-icon::after { content: ""; position: absolute; width: 10px; height: 10px; border-left: 2px solid #fff; border-bottom: 2px solid #fff; transform: rotate(45deg); top: 70rpx; left: 30rpx;}	  
</style>